<?php defined('SYSPATH') or die();?>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>预约时段-景点</title>
    {template 'stourtravel/public/public_min_js'}
    {php echo Common::getCss('style.css,base.css,base_new.css'); }
    {php echo Common::getScript("uploadify/jquery.uploadify.min.js,product_add.js,choose.js,imageup.js,template.js,DatePicker/WdatePicker.js"); }
    {php echo Common::getCss('uploadify.css','js/uploadify/'); }
    {php echo Common::getScript("laydate/laydate.js")}
</head>
<body>
<table class="content-tab" div_left=7pKrqt >
    <tr>
        <td width="119px" class="content-lt-td"  valign="top">
            {template 'stourtravel/public/leftnav'}
            <!--右侧内容区-->
        </td>
        <td valign="top" class="content-rt-td ">
            <div class="cfg-header-bar">
                {template 'admin/spot/attrid/header_tab'}
                <a href="javascript:;" class="fr btn btn-primary radius mt-6 mr-10" onclick="window.location.reload()">刷新</a>
            </div>
            <form method="post"  id="frm" name="frm" enctype="multipart/form-data">
                <!--基础信息开始-->
                <div class="product-add-div">
                    <ul class="info-item-block">
                        <li class="">
                            <span class="item-hd">分时预约：</span>
                            <div class="item-bd">
                                <label class="radio-label"><input type="radio" name="cfg_spot_is_open_period" {if !$config['cfg_spot_is_open_period']}checked="checked"{/if}  value="0">关闭</label>
                                <label class="radio-label ml-20"><input type="radio" name="cfg_spot_is_open_period"  {if $config['cfg_spot_is_open_period']==1}checked="checked"{/if} value="1">开启</label>
                            </div>
                        </li>
                        <li class="">
                            <span class="item-hd">预约时段：</span>
                            <div class="item-bd">
                                <div id="period_time_list">
                                    {loop $list $item}
                                    <div class="mt-10">
                                        <input type="text" id="period_time_{$item['id']}" name="period_time[]" data-id="{$item['id']}" class="input-text min_date date-time w100" value="{$item['start']} - {$item['end']}">
                                        <input type="hidden" name="id[]" class="id" value="{$item['id']}">
                                        <span class="btn btn-link size-S del_period_time">删除</span>
                                    </div>
                                    {/loop}
                                </div>
                                <div class="mt-5">
                                    <span class="btn btn-link size-S" id="add_period_time">添加时段</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <!--/基础信息结束-->
                <div class="clear clearfix mt-5">
                    <a class="btn btn-primary radius size-L ml-115" id="btn_save" href="javascript:;">保存</a>
                </div>
            </form>
        </td>
    </tr>
</table>
<script type="text/html" id="period_time_template">
    <div class="mt-10">
        <input type="text" id="period_time_{{data}}" name="period_time[]" data-id="{{data}}" readonly class="input-text min_date date-time w100" value="">
        <input type="hidden" name="id[]" class="id" value="">
        <span class="btn btn-link size-S del_period_time">删除</span>
    </div>
</script>
</body>
<script type="text/javascript">
    $(document).ready(function(){
        // 时间基础配置
        var timeInit = {
            elem: '.date-time'
            ,type: 'time'
            ,range: true
            ,format: 'HH:mm'
            ,theme: '{Common::get_back_color()}'
            ,done: timeDone
        };

        // 时间选择完成
        function timeDone(value, date, endDate) {
            if(value) {
                var times = value.split(" - ");
                var startTime = times[0],
                    endTime = times[1];
                if(startTime > endTime) {
                    var newTime = endTime + ' - ' + startTime,
                        id = this.id,
                        tag = "#period_time_"+id,
                        parent = $(tag).parent(),
                        newId = new Date().getTime(),
                        html = '<input type="text" id="period_time_'+newId+'" name="period_time[]" data-id="'+newId+'" class="input-text min_date date-time w100" value="'+newTime+'">';

                    $(tag).remove()

                    parent.prepend(html);

                    timeInit.id = newId;
                    timeInit.value = newTime;
                    timeInit.elem = "#period_time_"+newId;

                    laydate.render(timeInit);
                }
            }
        }


        // 日期初始化
        $('.date-time').each(function(){
            var id = $(this).data('id');
            timeInit.id = id;
            timeInit.elem = "#period_time_"+id;
            laydate.render(timeInit);
        })

        $("#period_time_list").on('click', '.del_period_time', function () {
            // 删除时段
            let self = this;
            ST.Util.confirmBox('操作确认', '该时段删除保存后关联的产品报价同时删除，确认删除？', function () {
                $(self).parent().remove()
            })
        })

        // 添加预约时段
        $("#add_period_time").on("click", function () {
            var newId = new Date().getTime();
            var html = template("period_time_template", {data: newId});

            $("#period_time_list").append(html);

            timeInit.id = newId;
            timeInit.value = '';
            timeInit.elem = "#period_time_"+newId;

            laydate.render(timeInit);
        })

        // 保存
        $("#btn_save").on("click", function () {
            // 检查时段是否有空的
            var periodObj = $("#period_time_list"),
                Objs = periodObj.find('.date-time'),
                idObjs = periodObj.find('.id'),
                emptyValue = false,
                date = [],
                isOpenPeriod = $("input[name=cfg_spot_is_open_period]:checked").val(),
                isRepeatIndex = -1,
                checkRepeat = [],
                checkRepeatStr = '';

            Objs.each(function (index, item) {
                if (item.value === '') {
                    emptyValue = true;
                    $(item).trigger('click');
                    return false;
                }

                var times = item.value.split(" - "),
                    startTime = times[0],
                    endTime = times[1];

                if (!startTime) {
                    emptyValue = true;
                    $(item).trigger('click');
                    return false;
                }

                if (!endTime) {
                    emptyValue = true;
                    $(item).trigger('click');
                    return false;
                }

                date[index] = {}
                date[index].min = startTime;
                date[index].max = endTime;
            })

            if (emptyValue) {
                ST.Util.showMsg('请选择时间', 5);
                return false;
            }

            $.each(date, function (index1, item1) {
                // 检查是否有重复的
                checkRepeatStr = item1.min + item1.max;
                isRepeatIndex = $.inArray(checkRepeatStr, checkRepeat);
                if (isRepeatIndex !== -1) {
                    isRepeatIndex = '第 ' + (isRepeatIndex + 1) + ' 个时段与第 ' + (index1 + 1);
                    return false;
                }
                checkRepeat[index1] = item1.min + item1.max;
            })

            if (isRepeatIndex !== -1) {
                ST.Util.showMsg(isRepeatIndex + ' 个时段填写重复', 5, 2500);
                return false;
            }

            idObjs.each(function (index, item) {
                date[index].id = item.value
            })

            ST.Util.showMsg('保存中', 6);
            $.post(SITEURL + 'spot/admin/spot/ajax_save_period_time', {
                date,
                cfg_spot_is_open_period: isOpenPeriod
            }, function (res) {
                if (res.status) {
                    ST.Util.showMsg(res.msg, 4);
                    setTimeout(function () {
                        location.reload();
                    }, 1500)
                } else {
                    ST.Util.showMsg(res.msg, 5);
                }
            }, 'json')
        })
    });
</script>
</html>
